import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  timeItemsContainer: {
    borderTop: "1px solid rgba(0, 0, 0, 0.09)",
    borderBottom: "1px solid rgba(0, 0, 0, 0.09)",
    marginTop: "8px",
  },
  durationTimeItemsContainer: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-between",
    color: "#666666",
    fontSize: "12px",
    cursor: "pointer",
    lineHeight: "32px",
    "& >span:hover": {
      color: "#037AFF",
    },
  },
  selectedDuration: {
    color: "#037AFF",
  },
  relativeDurationContainer: {
    "& > span": {
      width: "26%",
    },
    "& span:nth-child(4n+4)": {
      width: "22%",
      textAlign: "right",
    },
  },
  buttonContainer: {
    paddingTop: "12px",
    textAlign: "right",
  },
  inputContainer: {
    border: "1px solid #d9d9d9",
    borderRadius: "2px",
    fontSize: "12px",
    padding: "1px 12px",
    display: "flex",
    justifyContent: "space-between",
    "&:hover": {
      border: "1px solid #037AFF",
    },
    "&:active, &:focus-within": {
      border: "1px solid #037AFF",
    },
  },
  input: {
    outline: "none",
    appearance: "none",
    border: "none",
    flexGrow: 1,
  },
  resetSelect: {
    width: "88px",
    marginRight: "-12px",
    border: "none",
    background: "#f5f5f5",
    borderRadius: 0,
  },
});

export { useStyles };
